<template>
	<view>
		<tn-nav-bar fixed alpha customBack :height="50" style="width: 100%;background-color: azure;">
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
			    <text class='tn-icon tn-icon-left go_back'></text>
				<view class="information">
					<tn-avatar :src="avatarImg" class="vertical_middle"></tn-avatar>
					<view class="information_user">
						<view class="username">
							<nobr>阎秀兰</nobr>
						</view>
						<view class="time">
							<nobr>2019年8月22日</nobr>
						</view>
					</view>
				</view>
			  </view>
		</tn-nav-bar>
		<view class="content upload_padding" :style="{paddingTop: vuex_custom_bar_height + 5 + 'px'}">
			<tn-swiper :list="wiperList" :radius="0" :height="700"></tn-swiper>
			<view class="detail_title">{{ title }}</view>
			<view v-html="content" class="detail_content"></view>
			<view style="padding: 0 20px;">
				<span class="topics" v-for="(item, index) in topicsList" :key="item.name">#{{ item.name }}</span>
			</view>
			<view class="about_commodity" @click="goTo('/pages/users/commodity/detail')">
				<image :src="aboutImage" class="about_image"></image>
				<view class="about_title">
					<span>查看TA所提到的商品</span>
					<span style="float: right;color: #9CA3AF;">
						<text class="tn-icon-right"></text>
					</span>
				</view>
			</view>
		</view>

		<commentPopup :isShow="popupShow" @close="popupShow=false" />

		<view class="release_bottom">
			<view class="release_draft_box">
				<image :src="commentIcon" class="draft_box_icon" @click="popupShow = true"></image>
				<span class="release_draft_span" @click="popupShow = true">12</span>
				<image :src="likeIcon" class="draft_box_icon"></image>
				<span class="release_draft_span">12</span>
				<image :src="shareIcon" class="draft_box_icon"></image>
				<span class="release_draft_span">12</span>
			</view>
			<view class="release_draft_box2">
				<tn-button width="100%" height="45px" backgroundColor="#FE0000" fontColor="#FFFFFF">立即购买</tn-button>
			</view>
		</view>
	</view>
</template>

<script>
import commentPopup from './components/commentPopup.vue'

export default {
	components: {
		commentPopup,
	},
	data() {
		return {
			popupShow: false,
			avatarImg: 'https://via.placeholder.com/200x500.png/ff0000',
			title: '周末一起去赶集，优质农产品带回家',
			aboutImage: 'https://img2.baidu.com/it/u=24804542,1057190557&fm=253&fmt=auto&app=120&f=JPEG?w=910&h=500',
			commentIcon: require('@/pages/users/static/xingzu/comment.png'),
			likeIcon: require('@/pages/users/static/xingzu/like.png'),
			shareIcon: require('@/pages/users/static/xingzu/share.png'),
			wiperList: [
				{ image: 'https://via.placeholder.com/200x500.png/ff0000' },
				{ image: 'https://img2.baidu.com/it/u=24804542,1057190557&fm=253&fmt=auto&app=120&f=JPEG?w=910&h=500' },
			],
			topicsList: [
				{ name: '乡村农产品' },
				{ name: '新鲜水果' }
			],
			content: '非常棒的一次旅行，孩子暑假马上结束，也选中了一间似乎满足一切想象的'+
				'房子，就近回来入住两晚，孩子们最喜欢的浴缸，每天玩玩水，超级开心，边上配套设施不错的还有农庄，人均很划算，非常推荐大家入住。'
		}
	},
	onLoad(option) {

	},
	methods: {
		goBack() {
			uni.navigateBack({
				delta: 1
			})
		},
		goTo(url) {
			uni.navigateTo({
				url: url
			})
		}
	}
}
</script>

<style scoped>
.go_back {
	font-size: 20px;
	line-height: 33px;
	float: left;
}
.information {
	width: 100%;
	background-color: cadetblue;
	margin-left: 28px;
}
.vertical_middle {
	float: left;
}
.username {
	position: absolute;
	color: #1A1A1A;
	font-size: 14px;
	color: #808080;
	margin-left: 25px;
	margin-top: -3px;
}
.time {
	position: absolute;
	margin-left: 25px;
	margin-top: 15px;
}
.information_user {
	margin-left: 20px;
	color: #1A1A1A;
}
.detail_title {
	padding: 20px;
	color: #1A1A1A;
	font-size: 16px;
	font-weight: bold;
}
.content {
	padding-bottom: 70px;
}
.topics {
	color: #FE0000;
	margin-left: 10px;
}
.detail_content {
	padding: 0 20px;
}
.about_commodity {
	margin-top: 19px;
	padding: 0 10px 10px 10px;
	border-radius: 8px 8px 0px 0px;
}
.about_image {
	width: 100%;
	height: 200px;
	border-radius: 8px 8px 0px 0px;
}
.about_title {
	padding: 7px 12px;
	font-weight: bold;
	font-size: 14px;
	color: #1A1A1A;
	background-color: #F6F6F6;
	margin-top: -3px;
}

.release_bottom {
	border-top: 0.5px solid #EBEBEB;
	background-color: #FFFFFF;
	width:100%;
	height: 70px;
	margin:0 auto;
	overflow:hidden;
	position: fixed;
	bottom:0;
}
.release_draft_box {
	width: 55%;
	margin-top: 25px;
	margin-left: 20px;
}
.release_draft_span {
	color: #333333;
	font-size: 14px;
	margin-left: 2px;
	margin-right: 20px;
}
.release_draft_box2 {
	width: 45%;
	margin-top: -35px;
	float: right;
	padding-right: 20px;
}
.draft_box_icon {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}
</style>
